<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/XQ.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.pri_style{
				color: red;
				margin-left: 10px;
				font-size: 18px;
			}
			.sty{
				color: #C8C9CC;
			}
			.str_1{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<section>
				<van-swipe :autoplay="1000">
					<van-swipe-item v-for="swipe in detail.SwipeImages">
						<img :src="swipe.src" width = "100%;" />
					</van-swipe-item>
				</van-swipe>
				<van-cell-group>
					<van-row>
						<b>
							<van-cell :title="detail.Name"></van-cell>
						</b>
					</van-row>
					<van-row>
						<b>
							<div class="pri_style">￥{{detail.MarketPrice}}</div>
						</b>
					</van-row>
					<van-cell>
						<van-col class="sty" span="10">快递：免运费</van-col>
						<van-col class="sty">销量：660</van-col>
					</van-cell>
				</van-cell-group>
				<van-cell-group>
					<van-cell style="background-color:#F2F3F5">
						<van-col class="str_1" span="8">☞正品保证</van-col>
						<van-col class="str_1" span="8">☞极速退款</van-col>
						<van-col class="str_1" span="8">☞两天内发货</van-col>
					</van-cell>
					<van-cell style="background-color: #E5E5E5;">
					</van-cell>
				</van-cell-group>
				<!-- <div style="height: 15px;background-color: #E8E8E8;"></div> -->
				<van-panel title="商品详情">
					<van-list>
						<van-cell-swipe v-for="pdd in XQ">
							<van-cell><img :src="pdd" width = "100%"/></van-cell>
						</van-cell-swipe>
					</van-list>
				</van-panel>

			</section>
			<footer>
				<van-goods-action>
					<van-goods-action-mini-btn v-if="!IsCollect" icon="like-o" text="收藏" @click="onClickCollect"></van-goods-action-mini-btn>
					<van-goods-action-mini-btn v-if="IsCollect" icon="like" text="收藏" @click="onClickCollect"></van-goods-action-mini-btn>
					<van-goods-action-big-btn text="加入购物车" @click="onClickBigBtn"></van-goods-action-big-btn>
					<van-goods-action-big-btn primary text="立即购买"></van-goods-action-mini-btn>
				</van-goods-action>
			</footer>
		</div>	
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					detail: "",
					IsCollect:false,
					XQ: ["../img/dt_1.png", "../img/dt_2.png", "../img/dt_3.png", "../img/dt_4.png", "../img/dt_5.png"]
				},
				methods: {
					onClickCollect(){
						_this = this;
						ajax({
							url: "http://dsapi.ysd3g.com/API/CollectGoods",
							dataType: "jsonp",
							data: {
								// 点击的下标
								goodsId: 11,
								key:localStorage.getItem('Key')
							},
							success: function(res) {
								console.log(res);
								if(res.Error){
									alert(res.Msg)
								}else{
									_this.IsCollect = true;
									alert("收藏成功")
								}
							}
						})
					},
					onClickBigBtn(){
						alert("加入购物车")
					}
					
				},
				mounted() {
					_this = this;
					ajax({
						url: "http://dsapi.ysd3g.com/API/GoodsDetail",
						dataType: "jsonp",
						data: {
							// 点击的下标
							gId: 11
						},
						success: function(res) {
							_this.detail = res.Detail;
							console.log(_this.detail);
						}
					}),
					//判断收藏状态
					ajax({
						url: "http://dsapi.ysd3g.com/API/CollectGoods",
						dataType: "jsonp",
						data: {
							// 点击的下标
							goodsId: 11,
							key:localStorage.getItem('Key')
						},
						success: function(res) {
							console.log(res);
							if(res.Error){
								_this.IsCollect = true;
							}
						}
					})
				}

			})
		</script>
	</body>
</html>
